﻿@Styles.Render("~/Content/menu.css")
<div class="secondary-navigation">
    <nav id="navigation">
        @*<ul class="menu">
            <li class="menu-item"><a href="#">Home</a></li>
            <li class="menu-item"><a href="#">About</a></li>
            <li class="menu-item"><a href="#">Contact Us</a></li>
            <li class="menu-item"><a href="#">Awesomeness</a></li>
            <li class="menu-item"><a href="#">featured</a></li>
            <li class="menu-item"><a href="#">Brochure</a></li>
            <li class="menu-item"><a href="#">Design</a></li>
            <li class="menu-item"><a href="#">Inspiration</a></li>
        </ul>*@


        <div id="menu">
            <!-- Menu starts here -->

            <ul class="menu">
                <!-- List starts here -->

                <li><a href="#">5 columns</a><!-- 5 columns starts here -->

                    <div class="dropdown-5columns">
                        <!-- Container 5 columns starts here -->

                        <div class="col-5">
                            <img src="images/html5.png" width="100" height="100" alt="" />
                            <p>This is HTML5/CSS3 megamenu.</p>
                        </div>

                        <div class="col-5">
                            <h2>Example of big container with 5 columns</h2>
                        </div>

                        <div class="col-1">
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                        </div>

                        <div class="col-1">
                            <p class="italic">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                        </div>

                        <div class="col-1">
                            <p class="blackbox">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                        </div>

                        <div class="col-1">
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                        </div>

                        <div class="col-1">
                            <p class="strong">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                        </div>

                    </div>
                    <!-- 5 columns ends here -->

                </li>
                <!-- Container 5 columns ends here -->

                <li><a href="#">4 columns</a><!-- 4 columns starts here -->

                    <div class="dropdown-4columns">
                        <!-- Container 4 columns starts here -->

                        <div class="col-4">
                            <h2>Links Block 4 columns</h2>
                        </div>

                        <div class="col-1">

                            <ul class="blue">
                                <li><a href="#" title="Home">Home</a></li>
                                <li><a href="#" title="About Us">About</a></li>
                                <li><a href="#" title="Images">Images</a></li>
                                <li><a href="#" title="Sign in">Sign in</a></li>
                            </ul>

                        </div>

                        <div class="col-1">

                            <ul class="blue">
                                <li><a href="#" title="Home">Home</a></li>
                                <li><a href="#" title="About Us">About</a></li>
                                <li><a href="#" title="Images">Images</a></li>
                                <li><a href="#" title="Sign in">Sign in</a></li>
                            </ul>

                        </div>

                        <div class="col-1">

                            <ul class="blue">
                                <li><a href="#" title="Home">Home</a></li>
                                <li><a href="#" title="About Us">About</a></li>
                                <li><a href="#" title="Images">Images</a></li>
                                <li><a href="#" title="Sign in">Sign in</a></li>
                            </ul>

                        </div>

                        <div class="col-1">

                            <ul class="blue">
                                <li><a href="#" title="Home">Home</a></li>
                                <li><a href="#" title="About Us">About</a></li>
                                <li><a href="#" title="Images">Images</a></li>
                                <li><a href="#" title="Sign in">Sign in</a></li>
                            </ul>

                        </div>

                        <div class="col-3">

                            <p class="textblock">
                                <img src="images/pictures.png" width="72" height="72" class="imgclass" alt="" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took. <a href="#">Read more.</a>
                            </p>

                            <p class="textblock">
                                <img src="images/pictures.png" width="72" height="72" class="imgclass" alt="" />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took. <a href="#">Read more.</a>
                            </p>

                        </div>

                        <div class="col-1">
                            <p class="blackbox">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
                        </div>

                    </div>
                    <!-- 4 columns ends here -->

                </li>
                <!-- Container 4 columns ends here -->

                <li><a href="#">3 columns</a><!-- 3 columns starts here -->

                    <div class="dropdown-3columns align_right">
                        <!-- Container 3 columns starts here -->

                        <div class="col-3">
                            <h2>Blocks of links and text block</h2>
                        </div>

                        <div class="col-1">

                            <ul class="grisbox">
                                <li><a href="#" title="Home">Home</a></li>
                                <li><a href="#" title="About Us">About</a></li>
                                <li><a href="#" title="Images">Images</a></li>
                                <li><a href="#" title="Sign in">Sign in</a></li>
                            </ul>

                        </div>

                        <div class="col-1">

                            <p class="italic blackbox">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>

                        </div>

                        <div class="col-1">

                            <ul class="grisbox">
                                <li><a href="#" title="Home">Home</a></li>
                                <li><a href="#" title="About Us">About</a></li>
                                <li><a href="#" title="Images">Images</a></li>
                                <li><a href="#" title="Sign in">Sign in</a></li>
                            </ul>

                        </div>

                    </div>
                    <!-- 3 columns ends here -->

                </li>
                <!-- Container 3 columns ends here -->

                <li><a href="#">2 columns</a><!-- 2 columns starts here -->

                    <div class="dropdown-2columns">
                        <!-- Container 2 columns starts here -->

                        <div class="col-1">

                            <ul class="grisbox">
                                <li><a href="#" title="Home">Home</a></li>
                                <li><a href="#" title="About Us">About</a></li>
                                <li><a href="#" title="Images">Images</a></li>
                                <li><a href="#" title="Sign in">Sign in</a></li>
                            </ul>

                        </div>

                        <div class="col-1">

                            <img src="images/img.png" width="70" height="70" class="imgclass" alt="" />
                            <p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.<a href="#">Read more.</a></p>

                        </div>

                    </div>
                    <!-- 2 columns ends here -->

                </li>
                <!-- Container 2 columns ends here -->

                <li><a href="#">1 column</a><!-- 1 column starts here -->

                    <div class="dropdown-1column align_right">
                        <!-- Container 1 column starts here -->

                        <div class="col-demo">

                            <ul class="simple">
                                <li><a href="#" title="Home">Home</a></li>
                                <li><a href="#" title="About Us">About</a></li>
                                <li><a href="#" title="Images">Images</a></li>
                                <li><a href="#" title="Sign in">Sign in</a></li>
                                <li><a href="#" title="Home">Home</a></li>
                                <li><a href="#" title="About Us">About</a></li>
                                <li><a href="#" title="Images">Images</a></li>
                                <li><a href="#" title="Sign in">Sign in</a></li>
                            </ul>

                        </div>

                    </div>
                    <!-- 1 column ends here -->
                </li>
                <!-- Container 1 columnn ends here -->

            </ul>
            <!-- List ends here -->

        </div>
        <!-- Menu ends here -->


        @*<select>
            <option value="" selected="selected">Go to...</option>
            <option value="#">Home</option>
            <option value="#">About</option>
            <option value="#">Contact Us</option>
            <option value="#">Awesomeness</option>
            <option value="#">featured</option>
            <option value="#">Brochure</option>
            <option value="#">Design</option>
            <option value="#">Inspiration</option>
        </select>*@
    </nav>
</div>
